前端新增的基本頁面設計完，今天的內容是以後端為主，建立新增待辦事項的API，以將前端傳遞的資料寫入資料庫。

後端應用程式

這裡的後端實作以Express作為框架、mongoDB作為資料庫，使用mongoose套件作為資料庫管理工具。

let express = require("express");
let mongoose = require("mongoose");

接著加入Path為/api/addItem的post方法，分別為接收資料與寫入資料庫的中介與回傳資料的中介層，並設定Server監聽port為2000，為了避免資料在寫入前就進入回傳資料的方法，這邊使用promise套件，以Promise進行非同步執行。

let Promise = require("promise");
let app = express();
var saveRes;
let port = process.env.PORT || 2000;

app.use(express.json());
app.post("/api/addItem", (req, res, next) => {
    addItem(req.body).then(next);   // 寫入資料庫，下面定義
});

app.post("/api/addItem", (req, res) => {
    res.end(saveRes);
});

app.listen(port);

定義addItem函式與設定Promise，透過mongoose建立與資料庫的連線，將請求的資料內容寫入資料庫，並回傳儲存狀態訊息。

let addItem = ((data) => { new Promise((resolve, reject)=> {
    mongoose.connect("mongodb://localhost:27017/todoProj")
        .then(() => {
            let Schema = mongoose.Schema;
            let itemSchema = new Schema({
                Title: String,
                Note: String,
                Date: String,
                Tag: String
            });

            let itemData = mongoose.model("Item", itemSchema);

            let _item = itemData({
                Title: data.Title,
                Note: data.Note,
                Date: data.Date,
                Tag: data.Tag
            });

            _item.save((err) => {
                if (err) saveRes = "Failed";
                saveRes = "Success";
                resolve(saveRes);
            });
        }).catch(err=>{
          console.log(err);
          reject(err);
        });
    });
});

前端應用程式

在前一天的完成的應用程式中，首先設定package.json中的proxy為http://localhost:2000。再到App.js裡，AddItem函式的onSubmit方法透過submitHandler解析提交資料後，將資料以fetch方法向後端應用程式提出POST請求，並取得儲存狀態訊息。

// App.js
// ...
// function AddItem()

const onSubmit = data => AddTodo(data);

function AddTodo(data) {
  console.log(data);
  fetch("/api/addItem", {
    method: "POST",
    body: JSON.stringify(data),
    headers: new Headers({ "Content-Type": "application/json" })
  }).then(res => {
    alert(res.text())
  }).catch(err => console.log(err));
}

小結

前端與後端的連接上，最常遇到的就是proxy的問題，解決的方法感覺都很靠運氣...如果有大大能提供點建議就真的太感謝 今天的進度就到新增項目完成，希望明天能順利完成編輯的前後端...